<script setup lang="ts">
  import SchemaSearchPage from '@/components/schema-search-page/index.vue'
  import type { DoSearch, SearchFieldTypes } from '@/components/schema-search-page/interface'
  import { EmployeeStatusEnum } from '@/shared'
  import type { EmployeeEntity } from '@/shared/entity/employee'
  import { EmployeeStatusOption } from '@/shared/options'
  import { getUri } from '@/utils'
  import { DoGet, DoPost } from '@/utils/http'
  import { Badge, Space, Link, Button, Popconfirm } from '@arco-design/web-vue'
  import Create from './create/index.vue'
  import { ref, useTemplateRef } from 'vue'

  const tableRef = useTemplateRef('tableRef')

  const Refresh = () => {
    tableRef.value?.Refresh()
  }

  const searchFields: SearchFieldTypes = [
    {
      type: 'Input',
      fieldName: 'name',
      fieldLabel: '员工姓名',
      props: {
        style: 'width: 208px'
      }
    }
  ]
  const columns = [
    {
      title: '员工姓名',
      dataIndex: 'name'
    },
    {
      title: '账号',
      dataIndex: 'username'
    },
    {
      title: '手机号',
      dataIndex: 'phone'
    },
    {
      title: '账号状态',
      dataIndex: 'status'
    },
    {
      title: '最后操作时间',
      dataIndex: 'updateTime'
    },
    {
      title: '操作',
      dataIndex: 'action'
    }
  ]
  const doSearch: DoSearch = async (page: number, size: number, conditions?: any) => {
    const resp = await DoGet<EmployeeEntity[]>(
      getUri('/employee/page', {
        page,
        pageSize: size,
        ...conditions
      })
    )

    return {
      data: resp.data,
      total: resp.total || 0
    }
  }

  const getStatusInfo = (status: EmployeeStatusEnum) => {
    const record = EmployeeStatusOption.find(o => o.value === status)
    return record?.label
  }

  const visible = ref(false)

  const initialValues = ref<Partial<EmployeeEntity>>({})

  const handlerEdit = (record: EmployeeEntity) => {
    initialValues.value = record
    visible.value = true
  }

  const handlerCreate = () => {
    initialValues.value = {}
    visible.value = true
  }

  const handlerChangeStatus = async (status: EmployeeStatusEnum, id: number) => {
    await DoPost(getUri(`/employee/status/${status}`, { id }))
    Refresh()
  }
</script>

<template>
  <SchemaSearchPage
    :search-fields="searchFields"
    :columns="columns"
    :do-search="doSearch"
    ref="tableRef"
  >
    <template #status="{ record }">
      <Badge
        :status="record.status === EmployeeStatusEnum.Enable ? 'success' : 'danger'"
        :text="getStatusInfo(record.status)"
      ></Badge>
    </template>
    <template #action="{ record }">
      <Space>
        <Link @click="handlerEdit(record)">修改</Link>
        <Popconfirm
          content="确认操作吗？"
          @ok="
            handlerChangeStatus(
              record.status === EmployeeStatusEnum.Enable
                ? EmployeeStatusEnum.Disable
                : EmployeeStatusEnum.Enable,
              record.id
            )
          "
        >
          <Link>
            {{ record.status === EmployeeStatusEnum.Enable ? '禁用' : '启用' }}
          </Link>
        </Popconfirm>
      </Space>
    </template>
    <template #default>
      <Button type="primary" @click="handlerCreate">添加员工</Button>
    </template>
  </SchemaSearchPage>
  <Create v-model="visible" :initialValues="initialValues" @refresh="Refresh" />
</template>
